<template>
	<view>

		<!-- 展示选择 S -->
		<view class="tp-h98 level_align flex_between tp-fc333 tp-fz32 tp-bgf  tp-mb2">
			<view class="center_combo flex-1 tp-h100" v-for="(item,index) in collectList" :key="index" :class="{actice : item.alias == curCollectInfo.alias}" @click="changeCollect(item)">
				{{item.name}}
			</view>
		</view>
		<!-- 展示选择 E -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in list" :key="index" :options="options1" :disabled="isDel" @click="bindClick(item,index)">
				<view class="level_align">
					<view class="left-box  column_align" v-if="isDel" @click="checkThis(item)">
						<uni-icons v-if="checkArr.find(element => element == item[curCollectInfo.idName]) == undefined" type="circle" size="20" color="#999"></uni-icons>
						<uni-icons v-else type="circle-filled" size="20" color="#FFAF3C"></uni-icons>
					</view>
					<view class="right-box tp-w690 " @longpress="isDel = true">
						<!-- 景区 S -->
						<view v-if="curCollectInfo.alias == '1'" @click="pageJumps('/pagesSecond/scenic/scenicDetail?id=' + item.jqId)" class="tp-ptb0lr30 tp-w690 level_align tp-bgf tp-pt20 tp-pb20 " :style="{paddingLeft: isDel ? '0' : '30rpx'}">
							<view class="tp-pr">
								<image class="scenic-img tp-br12 tp-mr20" :src="wwwImgUrl + item.jqCover"
								 mode="aspectFill"></image>
								<text class="img-lable tp-fcF">{{  item.jqSeasons && item.jqSeasons.length && item.jqSeasons.join('、')}}</text>
							</view>
							<view class="flex flex_column flex_between flex-1" style="height: 180rpx;">
								<view class="ellispsis1 tp-fc333 tp-fz28 tp-fw600">
									{{item.jqName}}
								</view>
								<view class="tp-fc666 tp-fz26 ellispsis1">
									{{item.jqIntro}}
								</view>
								<view class="level_align flex_between">
									<view class="ellispsis1  tp-mr20 tp-fz22 tp-fc666">
										<text class="tp-mr10">{{item.sales}}人已买 </text> <text v-if="item.distance"> | 距您{{item.distance}}km</text> 
									</view>
									<view class="tp-mt10 flex-1 level_align flex_end  tp-ofh">
										<view class="quan-tag tp-wsn tp-lh40 tp-ml10 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22" v-for="(it,ind) in item.jqLabels"
										 :key="ind">
											{{it}}
										</view>
									</view>
								</view>
								<view class="level_align flex_between ">
									<view class="flex align_baseline">
										<view class="tp-fz24 tp-red tp-mr20">
											￥<text class="tp-fz36">{{item.currentPrice}}</text>起
										</view>
										<s class="tp-fz24 tp-fc999">
											￥{{item.originalPrice}}
										</s>
									</view>
									<view class="tp-fz24 tp-yellow">
										{{item.jqScore}}分
									</view>
								</view>
							</view>
						</view>
						<!-- 景区 E -->
						<!-- 酒店 S -->
						<view v-if="curCollectInfo.alias == '0'" @click="pageJumps('/pagesSecond/hotel/hotelDetail?id=' + item.hotelId)" class="tp-ptb0lr30 tp-w690 level_align tp-bgf tp-mt20 tp-pb20" :style="{paddingLeft: isDel ? '0' : '30rpx'}" >
							<image class="hotel-img tp-br12 tp-mr20" :src="wwwImgUrl + item.hotelCover"
							 mode="aspectFill"></image>
							<view class="flex flex_column flex-1 flex_between" style="height: 208rpx;">
								<view class="tp-fz28 tp-fc333 ellispsis1">
									{{item.hotelName}}
								</view>
								<view class="level_align flex_between ">
									<text class="tp-yellow">{{item.hotelLevel}} | {{item.hotelScore}}分</text>
									<text class="tp-fc999" v-if="item.distance">距您{{item.distance}}km</text>
								</view>
								<view class="level_align ">
									<image class="tp-img28 tp-mr15" src="static/address.png" mode=""></image>
									<text class="ellispsis1 flex-1">{{item.hotelLocation}}</text>
								</view>
								<view class="level_align flex_between ">
									<text class="ellispsis1 tp-fc tp-mr20"><text v-for="(ite,ind) in item.salePoints" :key="ind">{{'#' +ite}} </text></text>
									<view class="tp-fz24 tp-red tp-fw600">
										￥<text class="tp-fz36">{{item.hotelPrice}}</text>起
									</view>
								</view>
							</view>
						</view>
						<!-- 酒店 E -->
						<!-- 商品 S -->
						<view v-if="curCollectInfo.alias == '2'" @click="goToGoodsDetail(item)" class="tp-ptb0lr30 tp-w690 level_align tp-bgf tp-mt20 tp-pb20" :style="{paddingLeft: isDel ? '0' : '30rpx'}">
							<image class="goods-img tp-br12 tp-mr20" :src="wwwImgUrl + item.pic"
							 mode="aspectFill"></image>
							<view class="flex flex_column flex_between flex-1" style="height: 154rpx;">
								<view class="ellispsis2 tp-fc333 tp-fz28">
									{{item.name}}
								</view>
								<view class="level_align flex_between ">
									<view class="flex align_baseline">
										<view class="tp-fz24 tp-red tp-mr20">
											￥<text class="tp-fz36">{{item.discountPrice}}</text>起
										</view>
										<view class="tp-fz24 tp-fc999 tp-tdlt">
											￥{{item.price}}
										</view>
									</view>
									<view class="tp-fz24 tp-fc999">
										销量{{item.sale}}
									</view>
								</view>
							</view>
						</view>
						<!-- 商品 E -->
						<!-- 店铺 S -->
						<view v-if="curCollectInfo.alias == '3'" @click="pageJumps('/pagesShop/shop/index1?sid=' + item.id)" class="tp-ptb0lr30 tp-w690 level_align tp-bgf tp-mt20" :style="{paddingLeft: isDel ? '0' : '30rpx'}">
							<view class="tp-w690  tp-bgf">
								<!-- 头部信息栏 -->
								<view class="level_align flex_between">
									<view class="level_align flex-1 tp-mr20">
										<image class="tp-img88 tp-mr20 tp-br8" :src="wwwImgUrl + item.scCover" mode=""></image>
										<view class="flex flex_column flex_between flex-1 tp-h88">
											<view class="tp-lh44 tp-fc333 tp-fz26 ellispsis1">
												{{item.scName}}
											</view>
											<view class="tp-lh40 level_align tp-fc666">
												<text v-if="item.scSales" class="tp-mr30">销量：{{item.scSales}}</text>
												<view class="level_align" v-if="item.scScore">
													<text>评分：</text><text class="tp-yellow">{{item.scScore}}分</text>
												</view>
											</view>
										</view>
									</view>
									<view class="tp-yellow tp-fz30 tp-ptb0lr20 tp-lh54 center_combo tp-border1 tp-br40" style="border-color: #FFAF3C;">
										进入店铺
									</view>
								</view>
								<!-- 内容 -->
								<view class="tp-mt20 tp-mt10">
									<view class="level_align tp-mt20 flex_wrap">
										<view class="tp-mb20 tp-pr" v-for="(urlItm, ind) in item.productIntroVoList" :index="ind" :key="ind"  
										 :style="{marginRight:(ind+1)%3 == 0 ?'0':'15rpx'}" @click.stop="pageJumps('/pagesShop/details/details?cid=' + urlItm.id)">
											<image class="shop-img tp-br8" :src="wwwImgUrl + urlItm.pic" mode="aspectFill"></image>
											<view class="shop-goods tp-ptb0lr20 tp-lh40 center_combo tp-red ">￥{{urlItm.price}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 店铺 E -->
						<!-- 文章 S -->
						<view v-if="curCollectInfo.alias == '4'" class="tp-ptb0lr30 tp-w690  level_align tp-bgf tp-mt20 tp-pb20" :style="{paddingLeft: isDel ? '0' : '30rpx'}" @click="pageJumps('/pagesSecond/strategy/strategyMessage?id=' + item.id)">
							<image class="raiders-img tp-br12 tp-mr20" :src="wwwImgUrl + item.cover"
							 mode="aspectFill"></image>
							<view class="flex flex_column flex_between flex-1" style="height: 160rpx;">
								<view class="level_align tp-fc333">
									<image class="tp-img64 tp-br50 tp-mr20" :src="www +'imgs/snap/mdd1.png'" mode=""></image>
									<view class="flex flex-1 flex_column">
										<view class="tp-fz24 ellispsis1">
											{{item.customerName}}
										</view>
										<view class="tp-fc999 tp-fz22">
											{{item.createTime}}
										</view>
									</view>
								</view>
								<view class="tp-fz28 ellispsis1">
									{{item.articleName}}
								</view>
								<view class="level_align flex_between">
									<view class="ellispsis1 flex-1 tp-mr20 tp-fc tp-fz24">
										<text v-for="(ite,ind) in item.label" :key="ind">{{'#' +ite}} </text>
									</view>
									<view class="level_align tp-fz22 tp-fc999">
										<image class="tp-img28 tp-mr15" src="../static/imgs/icons/see.png" mode=""></image>
										{{item.readNum}}
									</view>
								</view>
							</view>
						</view>
						<!-- 文章 E -->
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<!-- 底部栏 S -->
		<view class=" tp-mt20" v-if="isDel">
			<view class="tp-h98"></view>
			<view class="tp-h98 tp-btn-h100 tp-ptb0lr30 tp-bgf level_align flex_between">
				<view class="level_align tp-h100 tp-fc333 tp-fz28" @click="checkAll">
					<uni-icons v-if="checkArr.length != list.length" class="tp-mr20" type="circle" size="20" color="#999"></uni-icons>
					<uni-icons v-else class="tp-mr20" type="circle-filled" size="20" color="#FFAF3C"></uni-icons>
					<text>全选</text>
				</view>
				<view class="level_align">
					<view class=" tp-ptb0lr40 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30" @click="isDel = false,checkArr = []">
						完成
					</view>
					<view class=" tp-ptb0lr40 tp-h56 center_combo tp-bgf tp-br12 tp-fc666 tp-border1" @click="delCollect">
						删除
					</view>

				</view>
			</view>
		</view>
		<!-- 底部栏 E -->
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				list: [], // 列表
				isDel: false, // true 删除界面 false 正常
				checkArr: [], // 被选的
				options1: [{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}, ],
				collectList: [{
					name: '景区',
					alias: '1',
					idName: 'jqId',
				}, {
					name: '酒店',
					alias: '0',
					idName: 'hotelId',
				}, {
					name: '商品',
					alias: '2',
					idName: 'id',
				}, {
					name: '店铺',
					alias: '3',
					idName: 'id',
				}, {
					name: '文章',
					alias: '4',
					idName: 'id',
				}],
				curCollectInfo: {
					name: '景区',
					alias: '1',
					idName: 'jqId',
				},
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				
				ids: '', // 要删除的 ids
			}
		},
		onLoad() {
			this.mixinInitMap()
		},
		onShow(){
			this.getCollectList()
		},
		onPullDownRefresh() {
			this.getCollectList()
		},
		methods: {
			// 去商品详情   0=正常商品,1=秒杀商品,2=拼团商品,3=砍价商品,4=积分商品
			goToGoodsDetail(item){  
				let url = '';
				if(item.type == 0){
					url =  '/pagesShop/details/details?cid=' + item.id
				}else if(item.type == 1){
					url =  '/pagesShop/details/ms_details?cid=' + item.id
				}else if(item.type == 2){
					url =  '/pagesShop/details/tg_details?cid=' + item.id
				}else if(item.type == 3){
					url =  '/pagesShop/details/kj_details?cid=' + item.id
				}else if(item.type == 4){
					url =  '/pagesShop/details/jf_details?cid=' + item.id
				}
				uni.navigateTo({
					url: url
				})
			},
			// 删除
			delCollect(){
				if(!this.ids) return uni.showToast({
					title: '请选择删除的收藏',
					icon: 'none'
				})
				this.$http.get(this.$api.delCollectByIds + '?ids=' + this.ids + '&collectType=' + this.curCollectInfo.alias).then(res => {
					if (res.code === 200) {
						this.getCollectList()
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				})
			},
			// 获取收藏展示列表
			getCollectList(){
				this.$http.get(this.$api.collectList + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize + '&collectType=' + this.curCollectInfo.alias,).then(res => {
					uni.stopPullDownRefresh();
					this.showLoadMore = false;
					if (res.code === 200) {
						this.last_page = res.data.pageTotal
						if(this.curCollectInfo.alias == '1'){
							res.data.result.map(item => {
								let arr = item.jqLabels, brr = [];
								if(item.jqLabels && item.jqLabels.length &&  item.jqLabels.length > 2){
									for(let i = 0; i < 2; i++){
										brr.push(arr[i])
									}
									item.jqLabels = brr
								}
							})
						}
						if (this.pageNum > 1) {
							this.list = this.list.concat(res.data.result);
						} else {
							this.list = res.data.result
						}
				
					}
				})
			},
			// 左划删除
			bindClick(item){
				this.ids = item[this.curCollectInfo.idName]
				this.delCollect()
			},
			// 切换类别
			changeCollect(item){
				this.curCollectInfo = item
				this.list = []
				this.pageNum = 1
				this.checkArr = []
				this.isDel = false
				this.getCollectList()
			},
			// 多选
			checkThis(item) {
				var is_have = this.checkArr.find(element => element == item[this.curCollectInfo.idName])
				if (is_have == undefined) {
					this.checkArr.push(item[this.curCollectInfo.idName]);
				} else {
					this.checkArr.splice(this.checkArr.indexOf(is_have), 1);
				}
				this.ids = this.checkArr.join(',')
			},
			// 全选 全不选
			checkAll() {
				if (this.checkArr.length != this.list.length) {
					this.checkArr = []
					for (let i = 0; i < this.list.length; i++) {
						this.checkArr.push(this.list[i][this.curCollectInfo.idName])
					}
				} else {
					this.checkArr = []
				}
				this.ids = this.checkArr.join(',')
			},
		}
	}
</script>
<style lang="scss" scoped>
	.actice {
		color: $tc;
		position: relative;

		&::after {
			position: absolute;
			bottom: -3rpx;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			width: 36rpx;
			height: 6rpx;
			background: #00B4FF;
			border-radius: 3rpx;
		}
	}

	/deep/ .uni-swipe {
		margin-bottom: 2rpx;
	}

	.left-box {
		width: 80rpx;
	}

	.right-box {
		.travel-img {
			width: 335rpx;
			height: 200rpx;
			border-radius: 12rpx 12rpx 0px 0px;
		}

		.img-lable {
			position: absolute;
			top: 0;
			left: 0;
			padding: 6rpx;
			background: rgba(0, 0, 0, .3);
			color: rgba(255, 255, 255, .8);
			border-radius: 12rpx 0px 12rpx 0px;
		}

		.quan-tag {
			display: inline-block;
			padding: 0 6rpx;
			border-color: $tc;
		}

		.hotel-img {
			width: 248rpx;
			height: 208rpx;
		}

		.goods-img {
			width: 154rpx;
			height: 154rpx;
		}

		.shop-img {
			width: 220rpx;
			height: 220rpx;
		}

		.raiders-img {
			width: 220rpx;
			height: 160rpx;
		}

		.scenic-img {
			width: 240rpx;
			height: 180rpx;
		}
		.shop-goods{
			position: absolute;
			bottom: 8rpx;
			left: 0;
			background: rgba(0,0,0,.4);
			border-radius: 0 8rpx 0 8rpx;
		}
	}
</style>
